<script setup>
  import { onMounted, onUnmounted, ref } from 'vue';
  import { useStyleStore } from "@/store/styleStore.js";

  const styleStore = useStyleStore();

  let time = ref(new Date().getHours() + ":" + new Date().getMinutes().toString().padStart(2, '0'))
  let timerVar = null;
  let delayAnimation = ref(false);


  onMounted(() => {
    timerVar = setInterval(() => {
      let date = new Date();
      time.value = date.getHours() + ":" + date.getMinutes().toString().padStart(2, '0');
    }, 1000);
    setTimeout(function() {
      delayAnimation.value = true;
    }, 2600)
  })

  
  onUnmounted(() => {
    clearTimeout(timerVar);
  })
</script>
<template>
  <div :class="['timer-content', delayAnimation ? styleStore.timer.display ? 'timer-show-animation':'timer-hide-animation':'']">
    {{ time }}
  </div>
</template>
<style scoped>
  .timer-content {
    width: 120px;
    height: 56px;
    color: white;
    font-size: 36px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 96px;
    left: calc(50% - 60px);
    opacity: 0;
    transition: all .2s;
    user-select: none;
  }
  .timer-content:hover {
    font-size: 42px;
    cursor: pointer;
  }

  .timer-show-animation {
    display: flex;
    animation-name: showAnimation;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }
  .timer-hide-animation {
    display: none;
    animation-name: hideAnimation;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
  }

  @keyframes showAnimation {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes hideAnimation {
    from {
      display: flex;
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

</style>